<template>
    <div>
        <div class="pay-address-xin b-g-f">
            <img src="../../../static/img/address.png" alt="">
            <div class="address-box">
                <span class="shoujian-box">{{detail.receiver}} <em class="em-phone">{{detail.tel}}</em></span>
                <span class="address-name">{{detail.address}}</span>
            </div>
        </div>
        <div class="buyer-message b-g-f clearfix">
            <span class="buyer-message-span">买家留言</span>
            <input class="buyer-input" type="text">
        </div>
        <ul class="clearfix" v-if="JSON.stringify(detail) != '{}'">
            <li class="clearfix pay-left-box b-g-f" v-for="(item,index) in detail.proList[0]" :key="index">
                <img :src="item.photo_s" alt="">
                <div class="pay-right-box">
                    <span class="pay-right-title">{{item.name}}</span>
                    <span class="pay-right-num">
                        ￥{{item.price}}
                        <em class="pay-num">X{{item.num}}</em>
                    </span>
                </div>
                <div class="pay-right-heji-box order-bottom">
                    <span class="pay-right-heji">
                        共{{item.num}}件商品
                        <em class="pay-heji">合计：￥{{item.price}}</em>
                    </span>
                </div>
                <div class="detail-buy">
                    <span class="buy-detail" v-if="detail == 30 || detail == 50">支付方式：微信支付</span>
                    <span class="buy-detail">订单编号：{{detail.order_sn}}</span>
                    <span class="buy-detail">下单时间：{{$time(detail.create_time)}}</span>
                    <span class="buy-detail" v-if="detail.express_time > 0">发货时间：{{$time(detail.express_time)}}</span>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            detail:{}
        }
    },
    mounted(){
        this.orderDetails()
    },
    methods:{
        orderDetails(){
            this.$api.shopping.orderDetails({order_id:this.$route.params.orderId}).then(resp=>{
                if(resp.code == 1){
                    this.detail = resp.data
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.buyer-message{
    padding: 30px;
    border-top: 20px solid #f5f5f5;
    color: #666;
    font-size: 38px;
    .buyer-message-span{
        height: 50px;
        width: 180px;
        display: block;
        float: left;
    }
    .buyer-input{
        min-height: 50px;
        line-height: 50px;
        border: none;
        float: left;
    }
}
.detail-buy{
    padding-top: 30px;
    border-top: solid 2px #f5f5f5;
    font-size: 38px;
    color: #888;
    .buy-detail{
        font-size: 34px;
        display: block;
        height: 55px;
        line-height: 55px;
    }
}
</style>
